<template>
    <div class="rigthAside">
        <div class="rigthAsideTitle">
            <a :class="a1showClass" @click="checkArticle" href="#"><span class="fa fa-commenting-o"></span></a>
            <a :class="a2showClass" @click="checkCommont" href="#"><span class="fa fa-thumbs-up"></span></a>
            <a :class="a3showClass" @click="checkNewArticle" href="#"><span class="fa fa-gift"></span></a>
        </div>


        <div class="hidBox">
            <transition name="fade">
                <div class="hotArticle" v-show="showArticle">
                    <h5>热门文章</h5>
                    <ul >
                        <li v-for="item in subBlogList" :key="item.id">
                            <a ><img src="http://shilezhi.club:8082/Api/img/getImg/blog_1_time_1632542403309"></a>
                            <div  class="hotArticleContent">
                                <a @click="openBlog(item.id)">{{ item.title }}</a>
                                <span><i class="fa fa-commenting-o"></i>0</span>
                            </div>

                        </li>

                    </ul>
                </div>
            </transition>
            <transition name="fade">
                <div class="newCommont" v-show="showCommont">
                    <h5>热门评论</h5>
                    <ul>
                        <li v-for="item in subCommentList" :key="item.id">
                            <a href=""><img src="http://shilezhi.club:8082/Api/img/getImg/blog_1_time_1632542403309"></a>
                            <div class="hotArticleContent">
                                <a>{{item.userName}}</a>
                                <span>{{item.comment}}</span>
                            </div>

                        </li>
                    </ul>
                </div>
            </transition>
            <transition name="fade">
                <div class="newArticle" v-show="showNewArticle">
                    <h5>联系我</h5>
                    <el-image src=""></el-image>
                </div>
            </transition>

        </div>

        <div class="message">
            <h5>博客信息</h5>
            <ul>
                <li>
                    <div class="messageContent">
                        <span class="fa fa-commenting-o"></span>
                        <p>总文章</p>
                   </div>
                   <span class="messageNum">{{ pageNum }}</span>
               </li>
               <li>
                   <div class="messageContent">
                        <span class="fa fa-commenting-o"></span>
                        <p>访问量</p>
                   </div>
                   <span class="messageNum">15</span>
               </li>
               <li>
                   <div class="messageContent">
                        <span class="fa fa-commenting-o"></span>
                        <p>最后访问时间</p>
                   </div>
                   <span class="messageNum">15</span>
               </li>
               <li>
                   <div class="messageContent">
                        <span class="fa fa-commenting-o"></span>
                        <p>已经运行</p>
                   </div>
                   <span class="messageNum">15</span>
               </li>
               
           </ul> 
        </div>


        <div class="lable">
            <h5>标签云</h5>
            <div class="connect">
              <a @click="()=>{$router.push({path:'/',query:{blogTag:item}})}" v-for="item in tagList"  :key="item">
                {{item}}
              </a>
            </div>
            
        </div>
    </div>
</template>

<script>
    export default {
        name: 'MyAsideRight',
      created() {
          //初始化热门文章
        this.axios.get('http://shilezhi.club:8082/Api/Blog/GetAllSub').then(
            response=>{
              console.log(response.data)
              this.blogList = response.data.blogList
            },
            error => {
              console.log(error)
            }
        )
        //初始化所有评论
      this.axios.get('http://shilezhi.club:8082/Api/Comment/GetAll').then(
          response=>{
            // console.log('comment'+response.data.commentList)
            this.commentList = response.data.commentList
          },
          error => {
            console.log(error)
          }
      )
        //初始化所有tag
        this.axios.get('http://shilezhi.club:8082/Api/Blog/GetAllTag').then(
            response=>{
              // console.log('comment'+response.data.commentList)
              this.tagList = response.data.tagList
            },
            error => {
              console.log(error)
            }
        )

      },
      data() {
            return {
              tagList:[],
              commentList:[],
                blogList:[],
                showArticle: true,
                showCommont: false,
                showNewArticle: false,
                a1showClass: 'active',
                a2showClass: '',
                a3showClass: '',
            }
        },
      computed:{
          subBlogList(){
            return this.blogList.slice(0,5)
          },
        subCommentList(){
          return this.commentList.slice(0,5)
        },
        pageNum(){
          return  this.$store.state.pageNum
        }
      },
    
        methods: {
            // btn(){
            //     this.isShow = !this.isShow
            // }
          openBlog(id){

            this.$router.push({path:'/BlogDetail',query:{blogId:id}})

          },
            checkArticle() {
                this.showArticle = true;
                this.showCommont = false;
                this.showNewArticle = false;
                this.showArticle = true;

                this.a1showClass = 'active';
                this.a2showClass = '';
                this.a3showClass = '';


            },
            checkCommont() {
                this.showNewArticle = false;
                this.showArticle = false;
                this.showCommont = true;

                this.a1showClass = '';
                this.a2showClass = 'active';
                this.a3showClass = '';
            },
            checkNewArticle() {
                this.showArticle = false;
                this.showCommont = false;
                this.showNewArticle = true;
                this.a1showClass = '';
                this.a2showClass = '';
                this.a3showClass = 'active';
            }

        },
    }

</script>

<style scoped>
    /* 响应式隐藏 */
    @media all and (max-width: 1024px) {
        .rigthAside {
            display: none !important;
        }
    }

    /* 整个盒子的样式 */
    .rigthAside {

        width: 13.75rem;
        flex-shrink: 0;
        color: #58666e;
    }

    h5{
        font-size: 0.9375rem;
        margin-bottom: 0.625rem;
    }

    ul li{
        display: flex;
        justify-content: space-between;

        box-sizing: border-box;
        padding: 0.625rem 0;
    }

    i{
        font-size: 0.875rem;
        margin-right: 0.3125rem;
    }

    img{
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
        border: 2px solid #fff;
        box-shadow: 2px 2px 3px #e1e1e1;
    }

    /* title的样式 */
    .rigthAsideTitle{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 3.75rem;
        
    }
    .rigthAsideTitle a{
        /* width: 5rem; */
        /* height: 3.75rem; */
    }
    .rigthAsideTitle a span{
        display: block;
        width: 3.125rem;
        height: 3.75rem;
        text-align: center;
        line-height: 3.75rem;
        font-size: 1rem;
        
    }
    .active{
        border-bottom: 2px #000000 solid;
    }

    /* 热门文章的样式 */
    .hotArticle,.message,.lable,.newCommont,.newArticle{
        padding: 1rem;
      box-sizing: border-box;
      width: 13.75rem;
    }
    .hotArticleContent{
        display: flex;
        flex-direction: column;
        width: 9.0625rem;
        font-size: 0.875rem;
    }
    .hotArticle .hotArticleContent span,.newCommont .hotArticleContent span,.newArticle .hotArticleContent span{
        line-height: 0.875rem;
        font-size: 0.8125rem;
    }
    .hotArticleContent
    {
      padding-left: 0.5rem;
    }

    /* 博客信息的样式 */
    .message ul{
        background-color: #FEFEFE;
    }
    .message ul li{

        display: flex;
    }
    .messageContent{
        display: flex;
        align-items: center;
    }
    .message li .messageContent p{
        font-size: 0.875rem;
    }
    .message li .messageContent p{
        font-size: 0.875rem;
        margin-left: 5px;
    }
    .message li .messageContent span{
        font-size: 0.5rem;
    }
    .message .messageNum,.lable a{
        font-size: 0.75rem;
        padding: 0.1875rem 0.4375rem;
        box-sizing: border-box;
        background-color: #D7E0E3;
        color: white;
        font-weight: 700;
        text-shadow: 0 0.0625rem 0 rgb(0 0 0 / 20%);
        border-radius: 0.625rem;
        line-height: 0.8rem;
        display: block;
        height: 1.125rem;
        text-align: center;
    }


    /* 标签云的样式 */
    .lable .connect {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .lable .connect a {
        margin: 0.1875rem 0;
    }

    @keyframes Xtogo {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }

    }

    @keyframes fade {

        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    .fade-enter-active {
        animation: fade reverse 0.5s linear;
    }

    .fade-leave-active {
        animation: fade 0.5s linear;
    }

    .hidBox {
        overflow: hidden;
        display: flex;
    }


</style>